
import ClassifyNav from '@/components/News/ClassifyNav'
import Link from 'next/link'
import styles from './styles.module.scss'
import { useState } from 'react'
import { useEffect } from 'react'
import { Pagination } from 'antd';
import Recommend from '@/components/News/Recommend'
import BrocadeCollection from '@/components/News/BrocadeCollection'
import useNavData from '@/store/getters/home'
import RenderJudge from '../RenderJudge'
import Head from 'next/head'
import List from '@/components/H5/News/List'
const VideoBack = ({ params: initParams, videoData, videoList, type, mobile }) => {
  const [data, setData] = useState(videoData)
  const [params, setParams] = useState(initParams)
  const { navData } = useNavData()
  const text = {
    1: {
      t: "足球录像回放_足球录像比赛视频_足球录像回放免费观看-鑫球体育",
      d: `足球录像栏目免费提供最新足球录像视频,足球经典比赛录像，全场足球录像高清回放等,涵盖中超,五大联赛,欧冠,亚冠,欧洲杯,亚洲杯,美洲杯,世界杯等足球赛事录像回放在线观看。哪里可以免费观看足球录像视频?鑫球体育-足球录像吧满足您！`,
      k: "足球录像,足球比赛录像,足球录像回放,足球录像比赛视频,足球录像回放免费观看,免费观看足球录像"
    },
    2: {
      t: "篮球录像回放_篮球录像比赛视频_篮球录像回放免费观看-鑫球体育",
      d: "篮球录像栏目免费提供最新篮球录像视频,篮球经典比赛录像，全场篮球录像高清回放等,涵盖NBA,CBA,世锦赛,欧锦赛等篮球赛事录像回放在线观看。哪里可以免费观看篮球录像视频?鑫球体育-篮球录像吧满足您！",
      k: "篮球录像,篮球比赛录像,篮球录像回放,篮球录像比赛视频,篮球录像回放免费观看,免费观看篮球录像"
    }
  }
  let list = [navData[3]?.nav, navData[4]?.nav][type - 1]?.filter(r => r?.id !== '')
  const pageKey = [navData[3], navData[4]][type - 1]?.key
  useEffect(() => {
    setData(videoData)
  }, [videoData])
  useEffect(() => {
    setParams(initParams)
  }, [initParams])

  console.log(data)

  const itemRender = (page, types) => {
    if (types === 'prev') {
      return <Link href={`/video/${params.en}/s${page}`}>上一页</Link>
    }
    if (types === 'next') {
      return <Link href={`/video/${params.en}/s${page}`}>下一页</Link>
    }
    return <Link href={`/video/${params.en}/s${page}`}>{page}</Link>
  };
  return (
    <>
      <Head>
        <title>{Reflect.get(text, type)?.t}</title>
        <meta name='description' content={Reflect.get(text, type)?.d} />
        <meta name="keywords" content={Reflect.get(text, type)?.k} />
      </Head>
      <RenderJudge value={mobile} active={
        <List.BlockInfo recommendNewsData={data} link={(row) => `/video/${params?.en}/${row?.id}`} imgKey={'videoImg'} />
      } inactive={
        <main className={styles.classify}>
          <section className={styles.left}>
            <ClassifyNav link={`/video/`} list={list} pathValue="en">
              {(row, css) => (
                <a title={row?.typeName} className={Number(params?.id) === row?.id ? css.active : null}>
                  {row?.typeName}
                </a>
              )}
            </ClassifyNav>
            <ul className={styles.list}>
              {
                data?.map(row => (
                  <Link href={`/video/${params.en}/${row?.id}`} key={row?.id}>
                    <a target="_blank">
                      <img src={row?.videoImg || row?.coverImg} alt={row?.videoName || row?.title} loading="lazy" />
                      <span>
                        <p>{row?.videoName || row?.title}</p>
                        <p>{row?.createTime}</p>
                      </span>
                    </a>
                  </Link>
                ))
              }
            </ul>
            <Pagination
              defaultCurrent={1}
              defaultPageSize={params.pageSize}
              current={params.current}
              total={params.total}
              pageSize={params.pageSize}
              style={{ marginLeft: 60 }}
              showSizeChanger={false}
              showQuickJumper={true}
              itemRender={itemRender}
              hideOnSinglePage
            />
          </section>
          <aside>
            <Recommend data={videoData} link={(row) => `/video/${params.en}/${row?.id}`} />
            <RenderJudge active={<blockquote style={{ height: 20 }}></blockquote>} value={videoData?.length > 0} />
            <BrocadeCollection data={videoList} link={(row) => `/video/${params.en}/${row?.id}`} />
          </aside>
        </main >
      } />
    </>
  )
}

export default VideoBack